import React from 'react'
import { UnorderedListOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'


export default function New({ newList, gotoRouter }: any) {
    let navigate = useNavigate();
    let goto = (item: any) => {
        navigate('/news/detail', { state: { id: item.id } })
        console.log(item);
    }
    return (
        <div className='new-all'>
            <p className='hot-title'><span>新闻列表</span> <span className='new-more' onClick={() => { gotoRouter('/news') }}><UnorderedListOutline fontSize={26} color='#999999' /></span></p>
            <div className='hot-h'></div>
            <ul>
                {
                    newList && newList.map((item: any) => {
                        return <li key={item.id} onClick={() => { goto(item) }}>
                            <img src={"/api2/" + item.cover} alt="" />
                            <div className='new-txt'>
                                <h3>{item.title}</h3>
                                <p dangerouslySetInnerHTML={{ __html: item.content.replace(/<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi, "") }}></p>
                                <div className='new-bom'> <span>评论总数:{item.commentNum}</span> <span>发布时间:{item.publishDate}</span></div>
                            </div>
                        </li>
                    })
                }
            </ul>
        </div >
    )
}
